<template>
	<div class="leader-area">
    <div class="top-bar">
      <div class="title-con" @touchstart="move" @touchmove="move">
        <mt-navbar v-model="selected"  refs="navTitle" class="navbar">  
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="A">集团领导</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="B">集团高管</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="C">返聘高管</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="search-area">
          <i class="fenge-span icon-line"></i><span @click="showMask = !showMask"><img src="/static/imgs/search.png" alt=""></span>
      </div>
     
    </div>

	<div class="fixedToBot">
		<a href="./module/personal.html">员工名册</a>
	</div>
	
      <mt-tab-container v-model="selected" :swipeable="true">

          <mt-tab-container-item id="A">
              <!--<v-leader @getValue="getTopLeader" @returnChecked="getCheckedValue"></v-leader>-->
              <!--<div class="mask">
                <mt-spinner v-show="isShow" type="fading-circle"></mt-spinner>
              </div>-->
              <v-down :total="totalNum" :dataList="dataSelList" @returnChecked="getCheckedValue" ></v-down>
              <div class="card-container">
              	<card-leader v-for="item in cardList" :key="item.emplid" :info='item'></card-leader>	
              </div>              
          </mt-tab-container-item>
    	  <mt-tab-container-item id="B">
              <v-leader :margin="bool" :dataList="dataSelList" :total="totalNum" @getValue="getLeader" @returnChecked="getCheckedValue"  @dropDown="dropDown"></v-leader>
              <div class="card-container">
              	<card-leader v-for="item in cardList" :key="item.emplid" :info='item'></card-leader>	
              </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="C">
              <v-down></v-down>
              <div class="card-container">
                <card-leader v-for="item in cardList" :key="item.emplid" :info='item'></card-leader>	
              </div> 
          </mt-tab-container-item>
      </mt-tab-container>


      <v-search :showSearch.sync="showMask" :dataList.sync="searchList"   @searchName="searchName"></v-search>
      <mt-actionsheet
      cancel-text=""
      :actions="actions"
      v-model="sheetVisible"
      >
      </mt-actionsheet>
	</div>
</template>

<script>
  import Vue from 'vue'
  import {Toast,MessageBox,Actionsheet,Navbar,TabItem,TabContainer, TabContainerItem,Cell,Switch} from 'mint-ui'
  // import Vue from 'vue'
  // import MintUI from 'mint-ui'
  // import 'mint-ui/lib/style.css'
  // Vue.use(Button);
  Vue.use(Toast);
  // Vue.use(MessageBox);
  // Vue.use(Actionsheet);
  // Vue.component(Actionsheet.name, Actionsheet);

  // import Button from 'mint-ui/lib/button';


  // Vue.component(Actionsheet.name, Actionsheet);
  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);
  Vue.component(Cell.name, Cell);
  Vue.component(Switch.name, Switch);
  
  // import leaderCondition from '@/components/leader/leaderConditionSel'
  const leaderCondition = r => require.ensure([],() => r(require('@/components/leader/leaderConditionSel')),'leaderCondition');
  // import leaderCard from '@/components/leader/cardLeader'
  const leaderCard = r => require.ensure([],() => r(require('@/components/leader/cardLeader')),'leaderCard');
  
  const DownSel = r => require.ensure([],() => r(require("@/components/public/downSel")),'DownSel');


  import Search from '@/components/public/searchShow'
  import Bus from '@/common/js/vueBus'
  export default {
    name: 'app',
    data() {
      return {
        sheetVisible: false,
        showMask:false,
        actions: [{
          name: '展示 Toast',
          key:'me',
          method: this.showToast.bind(this,this.selected)
        }, {
          name: '展示 Message Box',
          method: this.showMsgbox
        }],
        selected:'B',
        tableader:true,
        searchList:[],
        bool:true,
        value:null,
        cardList:'',
        dataSelList:null,
        totalNum:null,

        search_retire:'',
        leaderUnit_retire:'',
//集团领导
        leaderType_leader:'',
        search_leader:"",
		typeLeader:"1",
//集团高管
        leaderType_leader1:'',
        search_leader1:"",
        principal_leader1:"",
        backSeat_leader1:"",
        tuiyang_leader1:"",
        leaderUnit_retire1:"",
        

      };
    },

    methods: {
      showToast(val) {
        console.log(val);
        Toast('这是一个 Toast');
      },

      showMsgbox() {
        MessageBox('提示', '这是一个 Message Box');
      },
      dropDown:function(){
        this.sheetVisible = true;
        console.log("change");
        console.log(this.sheetVisible);
      },
      move:function(event){
        console.log("me");
        console.log(event);
      },
      sentAjax:function(params){
          return this.Axios.Post(this.URL.getGroupByCondition.url,params);
      },
      getLeaderInfo:function(type,search){
          var self = this;      
          if (search) {
              var params = {
                leaderType:this.leaderType_leader1,
                search:this.search_leader1,
                principal:'',
                backSeat:'',
                tuiyang :'',
                leaderUnit:''
              };
          } else {
              if (type === 1) {
              	//集团高管
              	this.typeLeader = "1"
                var params = {
                  leaderType:this.leaderType_leader1,
                  search:this.search_leader1,
                  principal:this.principal_leader1,
                  backSeat:this.backSeat_leader1,
                  tuiyang :this.tuiyang_leader1,
                  leaderUnit:this.leaderUnit_retire1
                };
              } else {
              	this.typeLeader = "2"
                var params = {
                  leaderType:this.selected,
                  search:this.search_leader,
                  principal:this.principal_leader,
                  backSeat:this.backSeat_leader,
                  tuiyang :this.tuiyang_leader,
                  leaderUnit:this.leaderUnit_retire
                };
          } 

          }
          this.sentAjax(params).then(function(res){
            console.log("leader",res);
            if (!search) {
              self.cardList = res.data.datas.dataList;
              self.dataSelList = res.data.datas.dataNum;
              self.dataSelList.unshift({
                c_lea_unit_name:'全部'
              });
              self.totalNum = res.data.total;
            } else {
              self.searchList = res.data.datas.dataList;
            }

          })
      },
      getRetireLeaderInfo:function(){
          var self = this;
          var params = {
            search:this.search_retire,
            leaderUnit:this.leaderUnit_retire
          };

          this.Axios.Post(this.URL.getRetirementByCondition.url,params).then(function(res){
            self.cardList = res.data.datas.dataList;
          })
      },
      getLeader:function(type,val){
        if (type === "onoffice") {
          val ? this.principal_leader = '' : this.principal_leader = 'Y';
          this.tuiyang_leader = '';
          this.backSeat_leader = "";
        } else if(type === "offoffice"){
          this.tuiyang_leader = "";
          this.principal_leader = '';
          val ? this.backSeat_leader = '' : this.backSeat_leader = 'Y';
        } else {
          val ? this.tuiyang_leader = '' : this.tuiyang_leader = 'Y';
          this.principal_leader = '';
          this.backSeat_leader = "";
        }
        this.getLeaderInfo();
      },
      getCheckedValue:function(val,type){
       	console.log(type);
        if (type==="1") {
        	 val === "全部" ? this.leaderUnit_retire1 = '' : this.leaderUnit_retire1 = val;
        	 this.getLeaderInfo(1)
        } else {
          	 val === "全部" ? this.leaderUnit_retire = '' : this.leaderUnit_retire = val;
        	 this.getLeaderInfo();    
        }
      },
      getTopLeader:function(type,val){
        if (type === "onoffice") {
          val ? this.principal_leader1 = '' : this.principal_leader1 = 'Y';
          this.tuiyang_leader1 = '';
          this.backSeat_leader1 = "";
        } else if(type === "offoffice"){
          this.tuiyang_leader1 = "";
          this.principal_leader1 = '';
          val ? this.backSeat_leader1 = '' : this.backSeat_leader1 = 'Y';
        } else {
          val ? this.tuiyang_leader1 = '' : this.tuiyang_leader1 = 'Y';
          this.principal_leader1 = '';
          this.backSeat_leader1 = "";
        }
        this.getLeaderInfo(1);        
      },
      searchName:function(name){
        
        if (!name){
          this.searchList = [];
          return;
        } 
        this.search_leader1 = name;
        this.getLeaderInfo(1,true);
      },
    //   handleResult:function(index){
    //     var self = this;
    //     // console.log([].push(JSON.parse(JSON.stringify(self.searchList[index]))));
    //     var arr = [];
    //     arr.push(JSON.parse(JSON.stringify(self.searchList[index])));
    //     self.cardList = arr;
    // }
    },
    components: {
      'v-search': Search,
      MtActionsheet:Actionsheet,
      MtNavbar:Navbar,
      'v-leader' :leaderCondition,
      'card-leader':leaderCard,
      'v-down':DownSel
    },
    watch:{
      selected : function(newValue,oldValue){
        
        if (newValue === 'C') {
          this.getRetireLeaderInfo();
        } else {
          this.leaderType_leader1 = this.selected;
          this.getLeaderInfo();
        }

      }
    },
    mounted:function(){
      var self =this;
      // console.log(this.$store.getters.isback);
      // this.$store.dispatch('hidebackbtn');
      // console.log(this.$store.getters.isback);
      this.leaderType_leader1 = this.selected;
      this.getLeaderInfo();

    }
  };
</script>

<style >
/*.leader-area .search-area{
  -webkit-box-flex: 0.8;
          -ms-flex: 0.8;
              flex: 0.8;
}*/
.fixedToBot{
	position:fixed;
	top:200px;
	z-index:1000;
	right:0;
	width:80px;
	height:80px;
	line-height:80px;
	border-radius:50%;
	background-color: #26A2FF;
	text-align: center;
}
.top-bar{
  vertical-align: top;
  position: relative;
  background-color:#fff;
}

.top-bar .title-con{
  width:100%;
  overflow-x: auto;

  display: inline-flex;
}
.top-bar .title-con::-webkit-scrollbar{
  display: none;
}

.leader-area .search-area{
  /*display: inline-block;*/
  top: 0;
  right: 0;
  position: absolute;
  height:1rem;
  width:1.5rem;
  vertical-align: top;
  background-color:rgba(255, 255, 255, 0.95);
}
.leader-area .top-bar img{
  width:0.28rem;
  height:0.28rem;
  margin-top: 0.35rem;
}
.leader-area {
  font-size:0.28rem;
  height:100%;
}
.leader-area .mint-tab-item-label {
    margin: auto;
    font-size: 0.32rem;
    font-weight: 600;
}
.leader-area .navbar .tab-item-leader{
  width:2rem;
}
.leader-area .navbar{
  padding-right:1rem;
}
.leader-area .mint-tab-container{
  height:100%;
  background-color: #f3f3f3;
}
.leader-area .mint-navbar .mint-tab-item.is-selected{
    border-bottom: 0px;
}
.leader-area .mint-spinner-fading-circle {
    margin: 2rem auto;
}

</style>
<style scope="scope">
.leader-area .search-area .fenge-span{
    display: inline-block;
    height:0.5rem;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    margin-right:0.3rem;
    width:0.1rem;
    /*background:url('/static/imgs/fenge.png') no-repeat;*/
}
.uint-header{
    clear: both;
    overflow: hidden;
    padding-left:0.1rem;
    padding-right:0.2rem;
}



/*.uint-header .xiala{
  margin-top:0.22rem;
}*/

</style>

